<template>
    <div>
        <div>
            <div class="myheader">
                <div class="mylogo">
                    <img src="../../assets/yunlogo.png" alt="yunlogo">
                    <span>寻真云盘</span>
                </div>
                <div class="rcontent">
                    <span class="el-dropdown-link">
                        <span>{{ username }}</span>
                        <img class="userhead" src="../../assets/head.png" alt="head">
                    </span>
                </div>
            </div>
        </div>
        <el-container >
            <el-main v-if="switchforshare">
                <div class="file-sharing-container">
                    <img src="../../assets/sharelogo.png" class="file-logo" />
                    <div class="file-info">
                        <div class="info-row">
                            <span class="info-label">文件名：&#9;</span>
                            <span class="info-value">{{ fileName }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">大小：&#9; </span>
                            <span class="info-value">{{ fileSize }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">过期时间：</span>
                            <span class="info-value">{{ expireTime }}</span>
                        </div>
                    </div>
                    <button class="file-save-btn" @click="saveShare">保存分享文件</button>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
  
<script>
import loginAPI from '../../api/login';
import ShareAPI from '../../api/share'

export default {
    data() {
        return {
            switchforshare: false,
            id: this.$route.params.id,
            username: "用户姓名",
            fileName: '',
            fileSize: '',
            expireTime: '',
            shareId: ''
        }
    },
    methods: {
        selectUserName() {
            loginAPI.getUserInformation().then(res => {
                console.log(res.data.data)
                this.username = res.data.data
            })
        },
        getShareOne(){
            let params = {
                'warehouseId': this.id,
            }
            let that = this;
            ShareAPI.getShareLink(params).then(res=>{
                console.log(res)
                if(!res.data.data){//该分享文件不存在的时候
                    this.$message.error("该文件不存在!")
                }else{
                    this.switchforshare = true
                    that.shareId = res.data.data.shareId
                    that.fileName = res.data.data.name
                    that.fileSize = res.data.data.size+"MB"
                    that.expireTime = res.data.data.expireTime
                }
            })
        },
        saveShare(){
            console.log(this.shareId)
            let data={}
            data.shareId = this.shareId
            ShareAPI.saveShareFile(data).then(res=>{
                if(res.data.code === 0){
                    this.$message.error(res.data.msg)
                }else{
                    this.$message.success(res.data.data)
                }
            }).catch(function (err) {
                that.$message(err);
            })
        }
    },
    created() {
        //自动加载indexs方法
        this.selectUserName();
        this.getShareOne()
    },
}
</script>
  
<style lang="less" scoped>
.myheader {
    background-color: #ebeef2;
    width: 100%-250px;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .rcontent {
        margin-left: 0;
        margin-right: 15px;

        .userhead {
            vertical-align: middle;
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        span {
            margin-right: 10px;
            font-size: 16px;
            color: rgb(81, 81, 81);
        }
    }

    .mylogo {
        display: flex;
        align-items: center;

        img {
            vertical-align: middle;
            width: 70px;
            height: 70px;
        }

        span {
            vertical-align: middle;
            font-size: xx-large;
            color: #494949;
            text-align: center;
            font-weight: bold;
            font-family: 'Zhi Mang Xing';
        }
    }
}
.file-sharing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 400px;
}

.file-logo {
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin-top: 30px;
  margin-bottom: 30px;
}

.file-info {
  margin-bottom: 60px;
}

.info-row {
  display: flex;
  align-items: center;
}

.info-label {
  font-weight: bold;
  margin-right: 10px;
  display: inline-block;
  width: 80px; /* 设置标签的宽度 */
  white-space: pre; /* 将空格和制表符保留为原始格式 */
}

.file-save-btn {
  margin-top: -20px;
  padding: 12px 24px;
  border-radius: 4px;
  background-color: #3366ff;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
</style>
  